<template>
    <div>
      <div class="status_wrapper">
        <div class="left">
          <div>
            <span>预定时间</span>
            <div class="demo-date-picker">
              <div class="block">
                <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始"
                  end-placeholder="结束" />
              </div>
            </div>
          </div>
          <div>
            <span>座席类型</span>
            <div class="flex flex-wrap items-center">
              <el-dropdown>
                <el-button type="info" plain>
                  全部<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>商务座</el-dropdown-item>
                    <el-dropdown-item>一等座</el-dropdown-item>
                    <el-dropdown-item>二等座</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div>
            <span>状态</span>
            <div class="flex flex-wrap items-center">
              <el-dropdown>
                <el-button type="info" plain>
                  全部<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>已付款</el-dropdown-item>
                    <el-dropdown-item>已取票</el-dropdown-item>
                    <el-dropdown-item>已取消</el-dropdown-item>
                    <el-dropdown-item>待付款</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="eableBtn">
            <img style="width: 25px;" src="@/assets/Icons/png/Checkbox/flase-label.png" alt="">
            <span>启用</span>
          </div>
          <div>
            <el-input v-model="input" class="w-50 m-2" placeholder="搜索订单号/车次" :prefix-icon="Search" @change="searchOrder" />
          </div>
          <el-button class="addBtn" color="#626aef">
            <img style="width: 30px;" src="@/assets/Icons/png/批量取消.png" alt="">
            批量取消 </el-button>
        </div>
      </div>
      <div>
        <el-table ref="multipleTableRef" :data="orderList" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="订单信息" width="180">
            <template #default="scope">
              <div>
                <p class="p1">{{ scope.row.order }}</p>
                <p class="p2">{{ scope.row.name }}</p>
                <p class="p3">{{ scope.row.date }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="车次/类型" width="100">
            <template #default="scope">
              <div class="trainNum_column">
                <p class="p1">{{ scope.row.trainNum }}</p>
                <p class="p2">{{ scope.row.type }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="出发/到达站" width="150">
            <template #default="scope">
              <div>
                <p><img class="cityIcon" src="@/assets/Icons/png/始.png" alt="">{{ scope.row.startCity }}</p>
                <p><img class="cityIcon" src="@/assets/Icons/png/始.png" alt="">{{ scope.row.endCity }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="出发/到达时间" width="140">
            <template #default="scope">
              <div>
                <p>{{ scope.row.startTime }}</p>
                <p>{{ scope.row.endTime }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="乘车人/出发日期" width="140">
            <template #default="scope">
              <div>
                <p>{{ scope.row.passenger }}</p>
                <p>{{ scope.row.departure }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="票价/车厢座号/座席类型" width="180">
            <template #default="scope">
              <div class="info_box">
                <p class="price">￥{{ scope.row.price }}</p>
                <p class="carriage">{{ scope.row.carriage }}</p>
                <p class="seatType">{{ scope.row.seatType }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.status }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="Operations">
            <template #default="scope">
              <div v-if="scope.row.status">
                <img class="seeBtn" src="@/assets/Icons/png/查看.png" alt="">
                <img class="deleteBtn" src="@/assets/Icons/png/订单管理2.png" alt="">
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import {storeToRefs} from 'pinia'
  import { useCounterStore } from '@/store/counter'
  import { ArrowDown, Search } from '@element-plus/icons-vue'
  const input = ref('');
  const value = ref('')
  const Store = useCounterStore()
  let {orderList} = storeToRefs(Store)
  const multipleSelection = ref<any[]>([])
  const searchOrder = () => {
  
  }
  const handleSelectionChange = (val: any[]) => {
    multipleSelection.value = val
  }
  </script>
  
  <style lang="scss" scoped>
  .status_wrapper {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
  
    .left {
      width: 70%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      justify-content: flex-start;
  
      div {
        display: flex;
        align-items: center;
  
        span {
          margin: 0 10px;
          font-size: 14px;
        }
      }
    }
  
    .right {
      width: 30%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
  
      div {
        display: flex;
        align-items: center;
  
        span {
          margin: 0 10px;
          font-size: 14px;
        }
  
      }
  
      .eableBtn {
  
        img {
          width: 14px;
        }
  
        span {
          font-size: 14px;
        }
      }
  
      .el-input {
        width: 150px;
        height: 36px;
        margin-right: 20px;
      }
  
      .addBtn {
        width: 109px;
        height: 36px;
        background: #1ba9ba;
  
        img {
          width: 14px;
        }
      }
    }
  }
  
  .info_box {
    .price {
      color: #ff8d41;
      font-size: 14px;
      line-height: 14px;
    }
  
    .carriage {
      color: #303849;
      font-size: 16px;
      line-height: 16px;
    }
  
    .seatType {
      color: #303849;
      font-size: 12px;
      line-height: 12px ;
    }
  }
  
  .trainNum_column {
    // text-align: center;
  
    .p1 {
      color: #1ba9ba;
      font-size: 16px;
      font-weight: bold;
    }
  
    .p2 {
      font-size: 12px;
    }
  }
  
  .demo-date-picker .block {
    width: 230px;
    height: 36px;
  }
  
  .cityIcon {
    width: 20px;
    margin-right: 10px;
    position: relative;
    top: 5px;
  }
  
  .seeBtn {
    width: 34px;
  }
  
  .deleteBtn {
    width: 32px;
    margin-left: 20px;
  }</style>
  